.dataset.accordion {
  margin: 0 auto;

  .dataset.accordion-title {
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    border-radius: .2em .2em 0 0;
    color: white;
    position: relative;
    background: #1569a8;
    margin-bottom: -1px;
    border-bottom: 1px solid #0e4671;
    text-align: left;
    width: 100%;

    &::after {
      content: "+";
      font-size: 18px;
      color: white;
      transition: transform .5s ease-in-out;
      position: absolute;
      right: 30px;
      top: -4px;
      font-family: monospace;
    }

    &.is-expanded {
      transition: background .5s;
      background: #0e4671;

      &::after {
        content: "-";
        transform: rotate(-360deg);
      }
    }
  }

  .dataset.accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s;
    margin: 0;
    padding: 0 30px;
    border: solid 1px #eeeeee;
    border-top: 0;
    background: #e8f4fc;

    ul {
      padding: 0;
      margin: 0;
      opacity: 0;
      transition: .5s;
    }

    &.is-expanded {
      max-height: 500px;
      overflow: visible;
      ul {
        opacity: 1;
      }
    }
  }

  &:after {
    width: 100%;
    height: 10px;
    display: block;
    background: #0e4671;
    content: '';
    border-radius: 0 0 .2em .2em;
  }
}

.Select-menu-outer {
    z-index: 7;
}

li.section {
  background-color: lightblue;
}

div.hoverable__content ul {
  list-style-type: disc;
  padding-inline-start: 30px
}

div.hoverable__content li > div {
  white-space: pre-wrap;
}

.dataset.accordion .dataset.accordion-content.example {
  background-color: white;
}
